<template>
  <!-- 评论列表 -->
  <van-list
    v-model="loading"
    :finished="finished"
    finished-text="没有更多了"
    @load="onLoad"
  >
    <!-- 评论项组件 -->
    <comment-item @click-reply="$emit('click-reply', $event)" :comment="item" v-for="item in list" :key="item.com_id + ''" />
    <!-- <van-cell v-for="item in list" :key="item.com_id + ''" :title="item.content" /> -->
  </van-list>
</template>

<script>
import { getCommentList } from '@/api/article.js'
import CommentItem from '@/components/CommentItem.vue'
export default {
  components: { CommentItem },
  name: 'ArticleComment',
  data () {
    return {
      loading: false, // 上拉加载更多的 loading
      finished: false, // 是否加载结束
      offset: null, // 获取每一页的表示，第一项不用传，第二页(第一页的结果返回)
      limit: 10
    }
  },

  props: {
    type: {
      type: String,
      default: 'a'
    },
    source: {
      type: [Number, Object, String],
      required: true
    },
    list: { // 评论列表
      type: Array,
      default: () => []
    }
  },

  methods: {
    async onLoad () {
      // 1.发送请求
      try {
        const { results, last_id: lastId, total_count: total } = await getCommentList({
          type: this.type,
          source: this.source,
          offset: this.offset,
          limit: this.limit
        })
        // console.log(total)
        this.$emit('on-success', total)
        this.list.push(...results)
        // 结束这一次的请求
        this.loading = false
        // 所有数据请求完成
        if (!results.length) {
          this.finished = true
        } else {
          this.offset = lastId
        }
      } catch (err) {
        console.log(err)
      }

      // // 异步更新数据
      // setTimeout(() => {
      //   for (let i = 0; i < 10; i++) {
      //     this.list.push(this.list.length + 1)
      //   }
      //   // 加载状态结束
      //   this.loading = false

      //   // 数据全部加载完成
      //   if (this.list.length >= 40) {
      //     this.finished = true
      //   }
      // }, 500)
    }
  }
}
</script>

<style scoped lang="less">
  .publish-wrap {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
  }

  .van-list {
    margin-bottom: 45px;
  }
</style>
